<template>
  <div>

    <el-row :class="[dataObjects ? 'samples-info-box' : 'tab-table']">
      <s-table
        v-loading="false"
        :column="tableData.column"
        :data="dataObjects.records"
        :header-cell-class-name="headerCellClass"
        pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10,20,30,50]"
        :current-page.sync="currentPage"
        :total="dataObjects.total || total"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
      />
    </el-row>
    <dialog-material :dialog-dis-p.sync="dialogDisP" :material-id="materialId" @child-say="listenToMyBoy" />
  </div>
</template>

<script>
// import myEcharts from './Echarts'
import dialogMaterial from './dialogMaterial'
import sTable from '@/components/STable/s-table'
export default {
  components: {
    sTable,
    dialogMaterial
  },
  props: {
    dataObjects: {
      type: Object,
      default: () => ({}),
      required: true
    }
  },
  data() {
    return {
      materialId: 0,
      detailId: '',
      dialogDisP: false,
      bankList: [
        { value: '1', label: '银行1' },
        { value: '2', label: '银行2' },
        { value: '3', label: '银行3' }
      ],
      stateList: [
        { value: 0, label: '全部' },
        { value: 1, label: '启用' },
        { value: 2, label: '禁用' }
      ],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      tableData: {
        column: [
          {
            prop: 'name',
            label: '物料名称',
            fixed: true

          },
          {
            prop: 'specification',
            label: '规格'
          },
          {
            prop: 'brand',
            label: '品牌'
          },
          {
            prop: 'number',
            label: '物料数量'
          },
          {
            prop: 'unitName',
            label: '物料单位'
          },
          {
            prop: 'total',
            label: '商品金额',
            render: (h, scope) => {
              const num = (Number(scope.row.totalMoney).toFixed(2) + '').replace(
                /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                '$&,'
              )
              return <span>{num}</span>
            }
          },
          {

            label: '操作',
            width: '100',
            render: (h, scope) => {
              return (
                <div>
                  <el-button
                    type='text'
                    size='small'
                    slot='reference'
                    onClick={() => {
                      this.detail(scope.row.id)
                    }}
                  >
                      明 细
                  </el-button>

                </div>
              )
            }
          }
        ],
        data: [
          {
            name: '固定列信息内容',
            w90: '二到四个',
            w140: '四到八个四到八个',
            w200: '八到十二个八到十二个八八',
            w260: '十二到十六个十二到十六个十二到十',
            money: '321029213.00',
            self: '自适应自适应自适应自适应自适应'
          }
        ],
        options: {
          boundariesElement: 'scrollParent'
        }
      }
    }
  },

  mounted() {
    if (document.addEventListener) {
      // firefox
      document.addEventListener(
        'DOMMouseScroll',
        function() {
          document.querySelector('#app').click()
        },
        false
      )
    }
  },

  methods: {
    listenToMyBoy() {
      this.dialogDisP = false
    },
    detail(rowId) {
      this.dialogDisP = true
      this.materialId = rowId
    },
    submitForm(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          val === 'tableFormOne' ? this.handleCloseOne() : this.handleCloseTwo()
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: '3000'
          })
        }
      })
    },
    handleCloseOne() {
      this.$nextTick(() => {
        this.$refs['tableFormOne'].resetFields()
      })
      this.newOneLine = false
    },
    handleCloseTwo() {
      this.$nextTick(() => {
        this.$refs['tableFormTwo'].resetFields()
      })
      this.newTwoLine = false
    },
    tablecellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.type === 'default') {
        return { 'padding-left': '20px' }
      }
      if (column.type === 'index') {
        return { 'padding-left': '20px' }
      }
    },
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      if (column.type === 'index') {
        return 'indexTableHeaderStyle'
      } else if (column.type === 'selection') {
        return ''
      } else {
        return 'samples-header-cell'
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.$emit('tablequery', { pageSize: this.pageSize, page: 1 })
    },
    handleCurrentChange(val) {
      this.$emit('tablequery', { pageSize: this.pageSize, page: val })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
